<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部门管理</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

<!-- 通用导航栏 -->
<nav class="navbar">
    <a href="index.html">社团管理</a>
    <a href="members.html">成员管理</a>
    <a href="memberships.html">成员关系管理</a>
    <a href="activities.html">活动管理</a>
    <a href="departments.html">部门管理</a>
</nav>

<h1>部门管理</h1>

<!-- 新增/编辑部门的表单 -->
<div id="department-form">
    <h2 id="form-title">新增部门</h2>
    <input type="hidden" id="department-id">
    <label for="department-name">部门名称:</label>
    <input type="text" id="department-name" required>
    <label for="department-description">描述:</label>
    <input type="text" id="department-description">
    <label for="club-id">所属社团ID:</label>
    <input type="text" id="club-id" required>
    <button onclick="handleSubmit()">提交</button>
    <button onclick="clearForm()">取消</button>
</div>

<!-- 部门列表 -->
<h2>部门列表</h2>
<table id="department-table" border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>描述</th>
        <th>社团ID</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="department-table-body"></tbody>
</table>

<script>
    // 配置 Axios 实例
    const api = axios.create({
        baseURL: 'http://localhost:8080', // 替换为后端 API 的实际 URL
        headers: { 'Content-Type': 'application/json' }
    });

    // 页面加载时获取部门列表
    document.addEventListener('DOMContentLoaded', fetchDepartments);

    function fetchDepartments() {
        api.get('/departments')
            .then(response => {
                const departments = response.data.data;
                const tbody = document.getElementById('department-table-body');
                tbody.innerHTML = '';

                departments.forEach(department => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
            <td>${department.departmentId}</td>
            <td>${department.name}</td>
            <td>${department.description}</td>
            <td>${department.clubId}</td>
            <td>
              <button onclick="editDepartment(${department.departmentId})">编辑</button>
              <button onclick="deleteDepartment(${department.departmentId})">删除</button>
            </td>
          `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => console.error('获取部门列表失败', error));
    }

    function handleSubmit() {
        const departmentId = document.getElementById('department-id').value;
        const name = document.getElementById('department-name').value;
        const description = document.getElementById('department-description').value;
        const clubId = document.getElementById('club-id').value;
        const department = { name, description, clubId };

        if (departmentId) {
            // 更新部门
            api.put(`/departments/${departmentId}`, department)
                .then(() => {
                    alert('部门更新成功');
                    fetchDepartments();
                    clearForm();
                })
                .catch(error => console.error('更新部门失败', error));
        } else {
            // 新增部门
            api.post('/departments', department)
                .then(() => {
                    alert('部门创建成功');
                    fetchDepartments();
                    clearForm();
                })
                .catch(error => console.error('创建部门失败', error));
        }
    }

    function editDepartment(departmentId) {
        api.get(`/departments/${departmentId}`)
            .then(response => {
                const department = response.data.data;
                document.getElementById('department-id').value = department.departmentId;
                document.getElementById('department-name').value = department.name;
                document.getElementById('department-description').value = department.description;
                document.getElementById('club-id').value = department.clubId;
                document.getElementById('form-title').innerText = '编辑部门';
            })
            .catch(error => console.error('获取部门失败', error));
    }

    function deleteDepartment(departmentId) {
        if (confirm('确定要删除该部门吗？')) {
            api.delete(`/departments/${departmentId}`)
                .then(() => {
                    alert('部门删除成功');
                    fetchDepartments();
                })
                .catch(error => console.error('删除部门失败', error));
        }
    }

    function clearForm() {
        document.getElementById('department-id').value = '';
        document.getElementById('department-name').value = '';
        document.getElementById('department-description').value = '';
        document.getElementById('club-id').value = '';
        document.getElementById('form-title').innerText = '新增部门';
    }
</script>

</body>
</html>